<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JokerLiang - 全栈工程师</title>
    <script src="./tailwind.js"></script>
    <link href="./all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        accent: '#6366f1'
                    },
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'sans-serif']
                    },
                    animation: {
                        'typewriter': 'typewriter 2s steps(10) forwards'
                    },
                    keyframes: {
                        typewriter: {
                            '0%': { width: '0' },
                            '100%': { width: '100%' }
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* 品牌色定义 */
        .android-green {
            color: #3DDC84; /* Android官方绿 */
        }
        .huawei-red {
            color: #FF0000; /* 华为红 */
        }
        .flutter-blue {
            color: #02569B; /* Flutter官方蓝 */
        }
        .server-purple {
            color: #8B5CF6; /* 服务器紫 */
        }
        /* 全栈工程师渐变效果 */
        .gradient-text {
            background: linear-gradient(45deg, #3DDC84, #02569B, #8B5CF6, #FF0000);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 300% 300%;
            animation: gradientShift 3s ease-in-out infinite;
        }
        @keyframes gradientShift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* 文字出现动画 */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .fade-in-up.animate {
            opacity: 1;
            transform: translateY(0);
        }

        /* 跳跃圆点动画 */
        .bounce-dot {
            animation: bounce-dot 2s infinite;
        }
        @keyframes bounce-dot {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        /* 全栈工程师特效 - 数字矩阵 */
        .gradient-flow {
            position: relative;
            overflow: hidden;
            background: transparent; /* 默认纯白背景 */
            transition: all 1s ease-in-out;
        }
        
        /* 数字雨背景 - 默认隐藏 */
        .gradient-flow::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 30%, rgba(0, 255, 127, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(0, 191, 255, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(138, 43, 226, 0.03) 0%, transparent 50%);
            opacity: 0;
            transition: all 1s ease-in-out;
            pointer-events: none;
        }
        
        /* 脉冲网格 - 默认隐藏 */
        .gradient-flow::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
            background-size: 60px 60px;
            opacity: 0;
            transition: all 1s ease-in-out;
            animation: grid-drift 20s linear infinite;
            pointer-events: none;
        }
        
        /* 只有全栈工程师激活状态才显示特效 */
        .gradient-flow.fullstack-active {
            background: linear-gradient(135deg, 
                rgba(0, 0, 0, 0.02) 0%, 
                rgba(99, 102, 241, 0.01) 25%,
                rgba(139, 92, 246, 0.01) 50%,
                rgba(168, 85, 247, 0.01) 75%,
                rgba(0, 0, 0, 0.02) 100%);
            animation: section-transform 2s ease-out forwards;
        }
        
        .gradient-flow.fullstack-active::before {
            opacity: 1;
            animation: aurora-dance 8s ease-in-out infinite;
        }
        
        .gradient-flow.fullstack-active::after {
            opacity: 1;
            animation: grid-pulse 3s ease-in-out infinite;
        }
        
        /* 渐隐状态 - 用于平滑过渡 */
        .gradient-flow.fullstack-fadeout {
            background: linear-gradient(135deg, 
                rgba(0, 0, 0, 0.02) 0%, 
                rgba(99, 102, 241, 0.01) 25%,
                rgba(139, 92, 246, 0.01) 50%,
                rgba(168, 85, 247, 0.01) 75%,
                rgba(0, 0, 0, 0.02) 100%);
            animation: section-fade-out 1.5s ease-out forwards;
        }
        
        .gradient-flow.fullstack-fadeout::before {
            animation: aurora-fade-out 1.5s ease-out forwards;
        }
        
        .gradient-flow.fullstack-fadeout::after {
            animation: grid-fade-out 1.5s ease-out forwards;
        }
        
        .gradient-flow.fullstack-fadeout .code-particle {
            animation: particle-fade-out 1.5s ease-out forwards;
        }
        
        /* 代码粒子效果 - 默认完全隐藏 */
        .code-particle {
            position: absolute;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            color: rgba(99, 102, 241, 0.4);
            pointer-events: none;
            opacity: 0;
            user-select: none;
            transition: opacity 0.5s ease-in-out;
        }
        
        /* 只有全栈激活时才显示代码粒子 */
        .gradient-flow.fullstack-active .code-particle {
            opacity: 1;
        }
        
        .code-particle:nth-child(1) { top: 15%; left: 10%; }
        .code-particle:nth-child(2) { top: 25%; right: 15%; }
        .code-particle:nth-child(3) { bottom: 30%; left: 20%; }
        .code-particle:nth-child(4) { bottom: 20%; right: 25%; }
        .code-particle:nth-child(5) { top: 40%; left: 50%; }
        
        /* 只有激活状态才有浮动动画 */
        .gradient-flow.fullstack-active .code-particle:nth-child(1) { animation: float-code 6s ease-in-out infinite; }
        .gradient-flow.fullstack-active .code-particle:nth-child(2) { animation: float-code 7s ease-in-out infinite 1s; }
        .gradient-flow.fullstack-active .code-particle:nth-child(3) { animation: float-code 5.5s ease-in-out infinite 2s; }
        .gradient-flow.fullstack-active .code-particle:nth-child(4) { animation: float-code 6.5s ease-in-out infinite 0.5s; }
        .gradient-flow.fullstack-active .code-particle:nth-child(5) { animation: float-code 8s ease-in-out infinite 1.5s; }
        
        @keyframes section-transform {
            0% {
                transform: perspective(1000px) rotateY(0deg);
                filter: blur(0px);
            }
            50% {
                transform: perspective(1000px) rotateY(2deg);
                filter: blur(1px) brightness(1.1);
            }
            100% {
                transform: perspective(1000px) rotateY(0deg);
                filter: blur(0px) brightness(1.05);
            }
        }
        
        @keyframes aurora-dance {
            0%, 100% { 
                background: radial-gradient(circle at 20% 30%, rgba(0, 255, 127, 0.03) 0%, transparent 50%),
                           radial-gradient(circle at 80% 70%, rgba(0, 191, 255, 0.03) 0%, transparent 50%),
                           radial-gradient(circle at 40% 80%, rgba(138, 43, 226, 0.03) 0%, transparent 50%);
            }
            33% { 
                background: radial-gradient(circle at 60% 20%, rgba(255, 20, 147, 0.03) 0%, transparent 50%),
                           radial-gradient(circle at 30% 90%, rgba(0, 255, 127, 0.03) 0%, transparent 50%),
                           radial-gradient(circle at 90% 40%, rgba(0, 191, 255, 0.03) 0%, transparent 50%);
            }
            66% { 
                background: radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.03) 0%, transparent 50%),
                           radial-gradient(circle at 10% 40%, rgba(255, 20, 147, 0.03) 0%, transparent 50%),
                           radial-gradient(circle at 70% 60%, rgba(0, 255, 127, 0.03) 0%, transparent 50%);
            }
        }
        
        @keyframes grid-pulse {
            0%, 100% {
                opacity: 0.3;
                background-size: 60px 60px;
            }
            50% {
                opacity: 0.6;
                background-size: 65px 65px;
            }
        }
        
        @keyframes grid-drift {
            0% { transform: translate(0, 0); }
            100% { transform: translate(60px, 60px); }
        }
        
        @keyframes float-code {
            0%, 100% { 
                transform: translateY(0px) rotateZ(0deg); 
                opacity: 0.4; 
            }
            25% { 
                transform: translateY(-20px) rotateZ(5deg); 
                opacity: 0.8; 
            }
            50% { 
                transform: translateY(-10px) rotateZ(-3deg); 
                opacity: 0.6; 
            }
            75% { 
                transform: translateY(-15px) rotateZ(2deg); 
                opacity: 0.7; 
            }
        }
        
        /* 渐隐动画 */
        @keyframes section-fade-out {
            0% {
                background: linear-gradient(135deg, 
                    rgba(0, 0, 0, 0.02) 0%, 
                    rgba(99, 102, 241, 0.01) 25%,
                    rgba(139, 92, 246, 0.01) 50%,
                    rgba(168, 85, 247, 0.01) 75%,
                    rgba(0, 0, 0, 0.02) 100%);
            }
            100% {
                background: transparent;
            }
        }
        
        @keyframes aurora-fade-out {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        
        @keyframes grid-fade-out {
            0% {
                opacity: 1;
                background-size: 65px 65px;
            }
            100% {
                opacity: 0;
                background-size: 60px 60px;
            }
        }
        
        @keyframes particle-fade-out {
            0% {
                opacity: 1;
                transform: translateY(-15px) rotateZ(2deg);
            }
            100% {
                opacity: 0;
                transform: translateY(-30px) rotateZ(10deg);
            }
        }

        /* 预留：滚动进度条已移除 */

        /* 渐变下划线链接 */
        .fancy-underline {
            position: relative;
        }
        .fancy-underline::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 1px;
            width: 100%;
            background: linear-gradient(90deg, #6366f1, #22d3ee, #a855f7);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }
        .fancy-underline:hover::after {
            transform: scaleX(1);
        }

        /* Hero 光斑跟随已移除 */

        /* 主题切换旋转动画 */
        @keyframes spin-once { to { transform: rotate(360deg); } }
        .spin-once { animation: spin-once 0.6s ease; }

        /* 入场动画分步延迟 + 性能提示 */
        .fade-in-up { will-change: transform, opacity; }
        .fade-in-up.stagger { transition-delay: var(--delay, 0ms); }

        /* 轻微 3D 倾斜效果 */
        .tilt {
            will-change: transform;
            transform-style: preserve-3d;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        /* 卡片高光反射 */
        .tilt { position: relative; }
        .tilt::after {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.12), transparent 40%);
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }
        .tilt:hover::after { opacity: 1; }

        /* Hero 3D 视差 */
        .parallax-3d {
            perspective: 1000px;
            transform-style: preserve-3d;
        }
        .parallax-3d .parallax-inner {
            transform-style: preserve-3d;
            transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
            transition: transform 0.15s ease-out;
            will-change: transform;
        }
        .parallax-layer {
            position: relative;
            transform: translateZ(var(--z, 0)) translateX(var(--tx, 0)) translateY(var(--ty, 0));
            will-change: transform;
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
  <body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 font-sans transition-colors duration-300">

    <!-- Header -->
    <header class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 sticky top-0 z-50 transition-colors duration-300">
        <nav class="max-w-5xl mx-auto px-6 lg:px-8">
            <div class="flex justify-between items-center py-6">
                <div class="flex items-center space-x-3">
                    <img src="images/avatar.jpeg" alt="JokerLiang" class="w-8 h-8 rounded-full object-cover">
                    <h1 class="text-lg font-medium text-black dark:text-white">JokerLiang</h1>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#about" class="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors text-sm font-medium">关于</a>
                    <a href="#projects" class="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors text-sm font-medium">作品</a>
                    <a href="#contact" class="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors text-sm font-medium">联系</a>
                    <button id="theme-toggle" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                        <i id="theme-icon" class="fas fa-moon text-gray-600 dark:text-gray-300"></i>
                    </button>
                </div>
                <div class="md:hidden flex items-center space-x-3">
                    <button id="theme-toggle-mobile" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
                        <i id="theme-icon-mobile" class="fas fa-moon text-gray-600 dark:text-gray-300"></i>
                    </button>
                    <button id="mobile-menu-btn" class="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white">
                        <i class="fas fa-bars text-lg"></i>
                    </button>
                </div>
            </div>
            <!-- Mobile Menu -->
            <div id="mobile-menu" class="hidden md:hidden pb-4">
                <div class="flex flex-col space-y-3">
                    <a href="#about" class="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors py-2 text-sm font-medium">关于</a>
                    <a href="#projects" class="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors py-2 text-sm font-medium">作品</a>
                    <a href="#contact" class="text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white transition-colors py-2 text-sm font-medium">联系</a>
                </div>
            </div>
        </nav>
    </header>

    

    <!-- Hero Section -->
    <section id="hero-section" class="py-24 lg:py-32 gradient-flow parallax-3d">
        <div class="code-particle">{ fullStack: true }</div>
        <div class="code-particle">function() { magic }</div>
        <div class="code-particle">⚡ Code.exe</div>
        <div class="code-particle">=> Innovation</div>
        <div class="code-particle">∞ Possibilities</div>
        <div class="max-w-5xl mx-auto px-6 lg:px-8 parallax-inner">
            <div class="max-w-3xl parallax-layer" style="--z: 20px">
                <h1 class="text-4xl lg:text-6xl font-light text-black dark:text-white mb-8 leading-tight">
                    Hi, 我是 <span id="typewriter-text" class="font-medium border-r-2 border-accent">JokerLiang</span>
                </h1>
                
                <p class="text-xl lg:text-2xl text-gray-500 dark:text-gray-400 mb-12 font-light leading-relaxed parallax-layer" style="--z: 10px">
                    前端 / Android / 鸿蒙 / Flutter / 后台 / 全栈
                </p>
                
                <div class="flex flex-col sm:flex-row gap-6 text-gray-500 dark:text-gray-400 mb-12 parallax-layer" style="--z: 5px">
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-envelope text-sm"></i>
                        <span class="text-sm">we@jokerliang.cn</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-calendar text-sm"></i>
                        <span class="text-sm">1997年9月</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-map-marker-alt text-sm"></i>
                        <span class="text-sm">长沙</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <i class="fas fa-file-alt text-sm"></i>
                        <a href="#" onclick="showResumeModal()" class="text-sm hover:text-accent transition-colors cursor-pointer">详细简历</a>
                    </div>
                </div>
                
                <a href="#projects" class="inline-flex items-center space-x-2 text-black dark:text-white hover:text-accent transition-colors group fancy-underline parallax-layer" style="--z: 30px">
                    <span class="text-sm font-medium">查看我的作品</span>
                    <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
        <div class="max-w-5xl mx-auto px-6 lg:px-8">
            <div class="mb-20">
                <h2 class="text-3xl lg:text-4xl font-light text-black dark:text-white mb-6">技能关键字</h2>
                <p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl font-light leading-relaxed">
                    我是一名全栈工程师，致力于创造优秀的数字产品体验。
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-6">
                <div class="group">
                    <div class="p-6 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:border-accent transition-colors duration-300 rounded-lg shadow-sm tilt hover:shadow-md h-full flex flex-col">
                        <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center mb-4 rounded-md">
                            <i class="fas fa-code text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                        </div>
                        <h3 class="text-base font-medium text-black dark:text-white mb-2">前端开发</h3>
                        <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed flex-grow">React / Vue</p>
                    </div>
                </div>
                
                <div class="group">
                    <div class="p-6 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:border-accent transition-colors duration-300 rounded-lg shadow-sm tilt hover:shadow-md h-full flex flex-col">
                        <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center mb-4 rounded-md">
                            <i class="fab fa-android text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                        </div>
                        <h3 class="text-base font-medium text-black dark:text-white mb-2">Android</h3>
                        <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed flex-grow">Compose / Xml</p>
                    </div>
                </div>
                
                <div class="group">
                    <div class="p-6 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:border-accent transition-colors duration-300 rounded-lg shadow-sm tilt hover:shadow-md h-full flex flex-col">
                        <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center mb-4 rounded-md">
                            <i class="fas fa-mobile-alt text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                        </div>
                        <h3 class="text-base font-medium text-black dark:text-white mb-2">Flutter</h3>
                        <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed flex-grow">跨平台开发</p>
                    </div>
                </div>
                
                <div class="group">
                    <div class="p-6 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:border-accent transition-colors duration-300 rounded-lg shadow-sm tilt hover:shadow-md h-full flex flex-col">
                        <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center mb-4 rounded-md">
                            <i class="fas fa-server text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                        </div>
                        <h3 class="text-base font-medium text-black dark:text-white mb-2">后台开发</h3>
                        <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed flex-grow">Java / Node / Go</p>
                    </div>
                </div>
                
                <div class="group">
                    <div class="p-6 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:border-accent transition-colors duration-300 rounded-lg shadow-sm tilt hover:shadow-md h-full flex flex-col">
                        <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center mb-4 rounded-md">
                            <i class="fas fa-layer-group text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                        </div>
                        <h3 class="text-base font-medium text-black dark:text-white mb-2">全栈开发</h3>
                        <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed flex-grow">端到端解决方案</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Projects Section -->
    <section id="projects" class="py-24 bg-white dark:bg-gray-900 transition-colors duration-300">
        <div class="max-w-5xl mx-auto px-6 lg:px-8">
            <div class="mb-20">
                <h2 class="text-3xl lg:text-4xl font-light text-black dark:text-white mb-6 fade-in-up">部分项目</h2>
                <p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl font-light leading-relaxed fade-in-up">欢迎下载体验</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 小白测评数据库 -->
                <div class="group fade-in-up">
                    <div class="border border-gray-200 dark:border-gray-600 hover:border-accent hover:shadow-md transition-all duration-300 p-6 bg-white dark:bg-gray-700 h-full flex flex-col rounded-lg shadow-sm tilt">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <h3 class="text-base font-medium text-black dark:text-white mb-2">小白测评数据库</h3>
                                <div class="w-8 h-px bg-gray-200 dark:bg-gray-600 group-hover:bg-accent transition-colors duration-300"></div>
                            </div>
                            <div class="w-8 h-8 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center rounded-md">
                                <i class="fas fa-database text-sm text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                            </div>
                        </div>
                        <p class="text-gray-500 dark:text-gray-400 mb-4 leading-relaxed flex-grow text-sm">每年服务数百万数码爱好者的专业测评平台</p>
                        
                        <div class="space-y-2 mb-4">
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span>每年服务数<span class="text-accent">百万</span>用户</span>
                            </div>
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span>独立开发</span>
                            </div>
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span>微信搜索"小白测评数据库"</span>
                            </div>
                        </div>

                        <div class="flex items-center justify-between mt-auto">
                            <div class="w-10 h-10 bg-gray-50 dark:bg-gray-600 flex items-center justify-center rounded-md cursor-pointer" onclick="showQRCode('images/xiaobaiceping.jpg', '小白测评数据库')">
                                <img src="images/xiaobaiceping.jpg" alt="小白测评数据库小程序码" class="w-full h-full object-cover rounded-md" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <div class="hidden flex-col items-center justify-center text-gray-400 dark:text-gray-300">
                                    <i class="fas fa-qrcode text-xs"></i>
                                </div>
                            </div>
                            <!-- <a href="#" class="text-black hover:text-accent transition-colors text-xs font-medium">查看详情 →</a> -->
                        </div>
                    </div>
                </div>

                <!-- 听懂一切 -->
                <div class="group fade-in-up">
                    <div class="border border-gray-200 dark:border-gray-600 hover:border-accent hover:shadow-md transition-all duration-300 p-6 bg-white dark:bg-gray-700 h-full flex flex-col rounded-lg shadow-sm tilt">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <h3 class="text-base font-medium text-black dark:text-white mb-2">听懂一切</h3>
                                <div class="w-8 h-px bg-gray-200 dark:bg-gray-600 group-hover:bg-accent transition-colors duration-300"></div>
                            </div>
                            <div class="w-8 h-8 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center rounded-md">
                                <i class="fas fa-headphones text-sm text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                            </div>
                        </div>
                        <p class="text-gray-500 dark:text-gray-400 mb-4 leading-relaxed flex-grow text-sm"><span class="text-accent font-blod">全平台</span>音频应用，App Store、 华为应用商店可直接下载</p>
                        
                        <div class="space-y-2 mb-4">
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span>iOS / Android / 小程序 / Web / 鸿蒙</span>
                            </div>
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span><span class="text-accent">Flutter</span> / Vue / <span class="text-accent">原生鸿蒙</span></span>
                            </div>
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <a href="https://tingdong.cn" target="_blank" class="text-sm hover:text-accent transition-colors underline">PC访问：tingdong.cn</a>

                            </div>
                        </div>

                        <div class="flex items-center justify-between mt-auto">
                            <div class="w-10 h-10 bg-gray-50 dark:bg-gray-600 flex items-center justify-center rounded-md cursor-pointer" onclick="showQRCode('images/tingdongyiqie.jpg', '听懂一切')">
                                <img src="images/tingdongyiqie.jpg" alt="听懂一切小程序码" class="w-full h-full object-cover rounded-md" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                                <div class="hidden flex-col items-center justify-center text-gray-400 dark:text-gray-300">
                                    <i class="fas fa-qrcode text-xs"></i>
                                </div>
                            </div>
                            <!-- <a href="#" class="text-black hover:text-accent transition-colors text-xs font-medium">查看详情 →</a> -->
                        </div>
                    </div>
                </div>

                <!-- 易测 ESURVEY -->
                <div class="group fade-in-up">
                    <div class="border border-gray-200 dark:border-gray-600 hover:border-accent hover:shadow-md transition-all duration-300 p-6 bg-white dark:bg-gray-700 h-full flex flex-col rounded-lg shadow-sm tilt">
                        <div class="flex items-start justify-between mb-4">
                            <div>
                                <h3 class="text-base font-medium text-black dark:text-white mb-2">易测 ESURVEY</h3>
                                <div class="w-8 h-px bg-gray-200 dark:bg-gray-600 group-hover:bg-accent transition-colors duration-300"></div>
                            </div>
                            <div class="w-8 h-8 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center rounded-md">
                                <i class="fas fa-map-marked-alt text-sm text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                            </div>
                        </div>
                        <p class="text-gray-500 dark:text-gray-400 mb-4 leading-relaxed flex-grow text-sm">专业的GIS Android行业应用解决方案</p>
                        
                        <div class="space-y-2 mb-4">
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span>GIS Android 行业应用</span>
                            </div>
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span>串口/蓝牙连接<span class="text-accent">硬件</span></span>
                              </div>
                                <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                  <span>•</span>
                                  <a href="https://open.sobds.com/5651471m0" target="_blank" class="text-sm hover:text-accent transition-colors">配套编写Android,微信小程序SDK</a>
                              </div>
                            <div class="flex items-center space-x-2 text-xs text-gray-500 dark:text-gray-400">
                                <span>•</span>
                                <span>各大应用商店搜索"易测"</span>
                            </div>
                        </div>

                        <div class="flex items-center justify-end mt-auto">
                            <!-- <a href="#" class="text-black hover:text-accent transition-colors text-xs font-medium">查看详情 →</a> -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="text-center mt-12 fade-in-up">
                <div class="flex flex-wrap justify-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">GiGi-House无人售货机</span>
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">福彩无人售卖机</span>
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">自助果汁机</span>
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">首席庄园</span>
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">问北越野</span>
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">阈限空间</span>
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">智能水泵</span>
                    <span class="px-3 py-1 bg-gray-50 dark:bg-gray-700 rounded-full">更多项目...</span>
                    <span class="text-gray-400 dark:text-gray-500"></span>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-24 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
        <div class="max-w-5xl mx-auto px-6 lg:px-8">
            <div class="mb-20">
                <h2 class="text-3xl lg:text-4xl font-light text-black dark:text-white mb-6 fade-in-up">联系我</h2>
                <p class="text-lg text-gray-500 dark:text-gray-400 max-w-2xl font-light leading-relaxed fade-in-up">有项目合作或技术交流，欢迎联系</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-2 gap-6">
                <a href="mailto:we@jokerliang.cn" class="group fade-in-up">
                    <div class="border border-gray-200 dark:border-gray-600 hover:border-accent transition-colors duration-300 p-6 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md tilt">
                        <div class="flex items-center space-x-4">
                            <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center rounded-md">
                                <i class="fas fa-envelope text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                            </div>
                            <div>
                                <div class="font-medium text-black dark:text-white mb-1">邮箱</div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">we@jokerliang.cn</div>
                            </div>
                        </div>
                    </div>
                </a>
                
                <div class="group relative fade-in-up">
                    <div class="border border-gray-200 dark:border-gray-600 hover:border-accent transition-colors duration-300 p-6 bg-white dark:bg-gray-700 cursor-pointer rounded-lg shadow-sm hover:shadow-md tilt" onclick="showQRCode('images/joker_we_qrcode.jpg', '微信二维码')">
                        <div class="flex items-center space-x-4">
                            <div class="w-10 h-10 bg-gray-100 dark:bg-gray-600 group-hover:bg-accent/10 transition-colors duration-300 flex items-center justify-center rounded-md">
                                <i class="fab fa-weixin text-gray-400 dark:text-gray-300 group-hover:text-accent transition-colors duration-300"></i>
                            </div>
                            <div>
                                <div class="font-medium text-black dark:text-white mb-1">微信</div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">点击查看二维码</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800 py-12 transition-colors duration-300">
        <div class="max-w-5xl mx-auto px-6 lg:px-8 text-center">
            <p class="text-gray-400 dark:text-gray-500 text-sm font-light">© 2025 JokerLiang. All rights reserved.</p>
        </div>
    </footer>

    <!-- 二维码弹窗 -->
    <div id="qrModal" class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 hidden">
        <div class="bg-white dark:bg-gray-800 p-8 rounded-xl max-w-md mx-4 shadow-2xl">
            <div class="text-center">
                <h3 id="qrTitle" class="text-lg font-medium text-black dark:text-white mb-4">二维码</h3>
                <div class="flex justify-center mb-4">
                    <img id="qrImage" src="" alt="二维码" class="max-w-full max-h-96 object-contain rounded-lg border border-gray-200 dark:border-gray-600">
                </div>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">微信扫一扫</p>
                <button onclick="closeQRCode()" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-black dark:text-white rounded-md transition-colors">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <!-- 简历弹窗 -->
    <div id="resumeModal" class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 hidden">
        <div class="bg-white dark:bg-gray-800 p-8 rounded-xl max-w-md mx-4 shadow-2xl">
            <div class="text-center">
                <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fab fa-github text-2xl text-blue-600 dark:text-blue-400"></i>
                </div>
                <h3 class="text-lg font-medium text-black dark:text-white mb-4">访问详细简历</h3>
                <p class="text-sm text-gray-500 dark:text-gray-400 mb-6 leading-relaxed">
                    简历托管在 GitHub，请保证网络环境畅通，否则可能无法访问。
                </p>
                <div class="flex gap-3 justify-center">
                    <button onclick="closeResumeModal()" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 text-black dark:text-white rounded-md transition-colors">
                        取消
                    </button>
                    <a href="https://github.com/LoverJoker/resume" target="_blank" onclick="closeResumeModal()" class="px-4 py-2 bg-accent hover:bg-accent/90 text-white rounded-md transition-colors">
                        继续访问
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Mobile menu toggle
        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
        const mobileMenu = document.getElementById('mobile-menu');
        
        mobileMenuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    // Close mobile menu if open
                    mobileMenu.classList.add('hidden');
                }
            });
        });

        // Add scroll effect to header
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 100) {
                header.classList.add('shadow-md');
            } else {
                header.classList.remove('shadow-md');
            }
        });

        // 文字出现动画观察器
        const observeElements = () => {
            const elements = document.querySelectorAll('.fade-in-up');

            // 分步延迟
            elements.forEach((el, idx) => {
                el.classList.add('stagger');
                el.style.setProperty('--delay', `${Math.min(idx * 80, 600)}ms`);
            });
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate');
                    }
                });
            }, {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            });

            elements.forEach(element => {
                observer.observe(element);
            });
        };

        // 初始化文字动画
        document.addEventListener('DOMContentLoaded', () => {
            observeElements();
        });

        // QR Code modal functions
        function showQRCode(imageSrc, title) {
            const modal = document.getElementById('qrModal');
            const qrImage = document.getElementById('qrImage');
            const qrTitle = document.getElementById('qrTitle');
            
            qrImage.src = imageSrc;
            qrTitle.textContent = title;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeQRCode() {
            const modal = document.getElementById('qrModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        // Close modal when clicking outside
        document.getElementById('qrModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeQRCode();
            }
        });

        // Resume modal functions
        function showResumeModal() {
            const modal = document.getElementById('resumeModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeResumeModal() {
            const modal = document.getElementById('resumeModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

        // Close resume modal when clicking outside
        document.getElementById('resumeModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closeResumeModal();
            }
        });

        // Company modal functions
        function showCompanyModal() {
            const modal = document.getElementById('companyModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        }

        function closeCompanyModal() {
            const modal = document.getElementById('companyModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        }

  
        // Theme toggle functionality
        function initTheme() {
            // Check for saved theme preference or default to 'light'
            const savedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
                document.documentElement.classList.add('dark');
                updateThemeIcons('dark');
            } else {
                document.documentElement.classList.remove('dark');
                updateThemeIcons('light');
            }
        }

        function updateThemeIcons(theme) {
            const themeIcon = document.getElementById('theme-icon');
            const themeIconMobile = document.getElementById('theme-icon-mobile');
            
            if (theme === 'dark') {
                themeIcon.className = 'fas fa-sun text-gray-600 dark:text-gray-300';
                themeIconMobile.className = 'fas fa-sun text-gray-600 dark:text-gray-300';
            } else {
                themeIcon.className = 'fas fa-moon text-gray-600 dark:text-gray-300';
                themeIconMobile.className = 'fas fa-moon text-gray-600 dark:text-gray-300';
            }
        }

        function toggleTheme() {
            const isDark = document.documentElement.classList.contains('dark');
            
            if (isDark) {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
                updateThemeIcons('light');
            } else {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
                updateThemeIcons('dark');
            }

            // 旋转反馈
            const i1 = document.getElementById('theme-icon');
            const i2 = document.getElementById('theme-icon-mobile');
            [i1, i2].forEach(icon => {
                if (!icon) return;
                icon.classList.remove('spin-once');
                // 触发重绘以便重复动画
                void icon.offsetWidth;
                icon.classList.add('spin-once');
            });
        }

        // Initialize theme on page load
        initTheme();

        // Add event listeners for theme toggle buttons
        document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
        document.getElementById('theme-toggle-mobile').addEventListener('click', toggleTheme);

        // Typewriter effect for identity with brand colors
        document.addEventListener('DOMContentLoaded', function() {
            const typewriterText = document.getElementById('typewriter-text');
            const heroSection = document.getElementById('hero-section');
            const identities = [
                { text: 'JokerLiang', color: 'text-black dark:text-white' },
                { text: 'Android工程师', color: 'android-green' }, // Android官方绿
                { text: '鸿蒙工程师', color: 'huawei-red' }, // 华为红
                { text: 'Flutter工程师', color: 'flutter-blue' }, // Flutter官方蓝
                { text: '后台工程师', color: 'server-purple' }, // 服务器紫
                { text: '全栈工程师', color: 'gradient-text' } // 动态渐变
            ];
            let currentIdentityIndex = 0;
            let i = 0;
            let isDeleting = false;
            
            function updateTextColor() {
                const currentIdentity = identities[currentIdentityIndex];
                typewriterText.className = `font-medium border-r-2 border-accent ${currentIdentity.color}`;
                
                // 当显示"全栈工程师"时，激活背景流光效果
                if (currentIdentity.text === '全栈工程师' && !isDeleting) {
                    // 根据打字进度来触发光束效果
                    if (i >= currentIdentity.text.length) {
                        heroSection.classList.add('fullstack-active');
                    }
                } else {
                    heroSection.classList.remove('fullstack-active');
                }
            }
            
            function typeWriter() {
                const currentIdentity = identities[currentIdentityIndex];
                
                if (!isDeleting && i < currentIdentity.text.length) {
                    // Typing
                    typewriterText.textContent = currentIdentity.text.substring(0, i + 1);
                    updateTextColor();
                    
                    // 当正在输入"全栈工程师"时，根据进度触发光束效果
                    if (currentIdentity.text === '全栈工程师') {
                        // 当输入到最后一个字时触发光束效果
                        if (i === currentIdentity.text.length - 1) {
                            setTimeout(() => {
                                heroSection.classList.add('fullstack-active');
                            }, 150); // 稍微延迟一下让打字效果完成
                        }
                    }
                    
                    i++;
                    setTimeout(typeWriter, 150);
                } else if (!isDeleting && i === currentIdentity.text.length) {
                    // Pause at end
                    updateTextColor(); // 确保在停留期间也更新状态
                    
                    // 如果是全栈工程师，停顿更久一些
                    const pauseTime = currentIdentity.text === '全栈工程师' ? 4000 : 2000;
                    
                    setTimeout(() => {
                        isDeleting = true;
                        typeWriter();
                    }, pauseTime);
                } else if (isDeleting && i > 0) {
                    // 如果是全栈工程师且刚开始删除，触发渐隐动画
                    if (currentIdentity.text === '全栈工程师' && i === currentIdentity.text.length) {
                        heroSection.classList.remove('fullstack-active');
                        heroSection.classList.add('fullstack-fadeout');
                        
                        // 1.5秒后移除渐隐类，确保动画完成
                        setTimeout(() => {
                            heroSection.classList.remove('fullstack-fadeout');
                        }, 1500);
                    }
                    
                    // Deleting
                    typewriterText.textContent = currentIdentity.text.substring(0, i - 1);
                    i--;
                    setTimeout(typeWriter, 100);
                } else if (isDeleting && i === 0) {
                    // Move to next identity
                    isDeleting = false;
                    currentIdentityIndex = (currentIdentityIndex + 1) % identities.length;
                    setTimeout(typeWriter, 500);
                }
            }
            
            // Start typing after a short delay
            setTimeout(typeWriter, 500);

            // 3D 视差（光斑已移除）：Hero、About、Projects
            function bindParallax(section) {
                const inner = section.querySelector('.parallax-inner');
                if (!inner) return;
                function update(e) {
                    const rect = section.getBoundingClientRect();
                    const cx = (('clientX' in e ? e.clientX : e.touches[0].clientX) - rect.left) / rect.width;
                    const cy = (('clientY' in e ? e.clientY : e.touches[0].clientY) - rect.top) / rect.height;
                    const rx = (cy - 0.5) * -12;
                    const ry = (cx - 0.5) * 12;
                    inner.style.transform = `rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`;
                }
                function reset() { inner.style.transform = 'rotateX(0deg) rotateY(0deg)'; }
                section.addEventListener('mousemove', update);
                section.addEventListener('touchmove', update, { passive: true });
                section.addEventListener('mouseleave', reset);
            }
            ['#hero-section'].forEach(sel => {
                const s = document.querySelector(sel);
                if (s) bindParallax(s);
            });

            // 离开还原由 bindParallax 统一处理

            // 卡片 3D 倾斜
            const tiltItems = document.querySelectorAll('.tilt');
            const maxDeg = 6;
            function handleTiltMove(e) {
                const target = e.currentTarget;
                const rect = target.getBoundingClientRect();
                const px = (e.clientX - rect.left) / rect.width; // 0..1
                const py = (e.clientY - rect.top) / rect.height; // 0..1
                const rx = (py - 0.5) * -2 * maxDeg; // 上下 -> rotateX
                const ry = (px - 0.5) * 2 * maxDeg;  // 左右 -> rotateY
                target.style.transform = `perspective(800px) rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg)`;
                // 高光反射位置
                target.style.setProperty('--mx', `${px * 100}%`);
                target.style.setProperty('--my', `${py * 100}%`);
            }
            function handleTiltLeave(e) {
                e.currentTarget.style.transform = 'perspective(800px) rotateX(0deg) rotateY(0deg)';
            }
            tiltItems.forEach(item => {
                item.addEventListener('mousemove', handleTiltMove);
                item.addEventListener('mouseleave', handleTiltLeave);
            });
        });

        // 滚动进度条已移除
    </script>
</body>
</html> 
</html> 